<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app div{
				width: 50px;
				height: 50px;
				border: 1px solid black;
			}
			.red{
				background-color: red;
			}
			.classB{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img :src="imgSrc" :style="{border:border}" />
			<button @click='next'>切换</button>
			<div :class="{red:isRed}"></div>
			<div :class="[classA]"></div>
			<div 
				:class="[classA,{classB:isClassB}]" 
				:style="{fontSize:'20px',fontWeight:'bold'}">
					123
			</div>
		</div>
		<script src="../vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data(){
					return{
						imgSrc:'../google.png',
						border:'3px dashed #ccc',
						isRed:'',
						classA:'red',
						isClassB:true,
					}
				},
				methods:{
					next(){
						this.imgSrc='../i.jpg';
						this.isRed=!this.isRed;
					}
				},
			});
		</script>
	</body>
</html>
